/*
var chartData = {
					lines:[{
						lineOption:{lineType:"linePoint",lineColor:"#000"},
						data:[1,1,3,5,6,6]
					},{
						lineOption:{lineType:"linePoint",lineColor:"green"},
						data:[1,2,4,7,9,9]
					}],
					xTick:['A','B','C','D','E','F']
				};
*/
function MarketBondLineChart(container,cfg){
	this.$container=(typeof container)=="string" ? $("#"+container) : container;

	this.cfg={
//		w:this.$container.width()||400,
//		h:this.$container.height()||300,
//		bgColor:"#EFEFEF",
		underlineColor:"#999",
//		bDrawExtra:false,
		linePoint:{pointRadius:2,lineColor:"#000"},
		mountain:{lineColor:"#000",fillColor:"#4A596A"},
		dist:{
//			left:0
		}
	}
	$.extend(true,this.cfg,cfg);
	
	this.lang=QS_Lang.marketBond;
	this.$wrap = $('<div class="bmlc-wrap"></div>').appendTo(this.$container);
}

MarketBondLineChart.prototype={
	init:function(chartData){
		if(!chartData || !chartData.lines || !chartData.lines.length)return;
		if(!chartData.lines[0].data.length)return;
		this.chartData = chartData;
		//init canvas
//		document.createfragmentElement();
		this._calcMaxMin(chartData.lines);
		this._extendLineOption(chartData.lines);
		this._resize();
	},
	_resize:function(){
		this.$wrap.html('');
		this._createCanvas();
		this.reDraw(this.chartData);
	},
	_createCanvas:function(){
		this.dCanvas=document.createElement("canvas");
		this.$canvas = $(this.dCanvas).appendTo(this.$wrap);
		$('<div></div>').appendTo(this.$wrap);
		if ($.browser.msie && parseFloat($.browser.version) < 9) {
			G_vmlCanvasManager.initElement(this.dCanvas);
		}
		this.ctx = this.dCanvas.getContext('2d');
		this.$canvas.attr("width",this.cfg.w);
		this.$canvas.attr("height",this.cfg.h);
	},
	reDraw:function(chartData){
//		this.mmData = this.calcMaxMin(chartData);
		var w = this.cfg.w;
		var h = this.cfg.h;
		
		var yTickW=this.mmData.yMax.toFixed(2).toString().length * 8;
		this.dist = {
			left:w * 0.03,
			right:yTickW,//w * 0.15,
			top:h * 0.1,
			bottom:30
		};
		$.extend(true,this.dist,this.cfg.dist);
		
		this.dist.w = w - this.dist.left - this.dist.right;
		this.dist.h = h - this.dist.top - this.dist.bottom;
		this.dist.xDist = this.dist.w / this.mmData.xDiff;
		this.dist.yDist = this.dist.h / this.mmData.yDiff;
		
		var lines = chartData.lines;
		for(var i = 0; i < lines.length; i++){
			this.convertData(lines[i]);
			
			var lineType = lines[i].lineOption.lineType;
			if(lineType == "linePoint"){
				this.drawLine(lines[i]);
				this.drawCircle(lines[i]);
			}else if(lineType == "mountain"){
				this.drawFill(lines[i]);
				this.drawLine(lines[i]);
			}
		}
		this.drawUnderline();
		this.drawxTick(chartData);
		this.drawyTick(chartData);
		
		if(typeof this.cfg.tabIndex != 'undefined'){
			var tabIndex=this.cfg.tabIndex;
			if(tabIndex == 0){
				this.drawPolyline();
			}else if(tabIndex == 1){
				this.drawOneMonth();
			}
		}
	},
	_calcMaxMin:function(lines){
		var mmData = {};
//		mmData.xMin = mmData.xMax = lines[0].data[0][0];
//		mmData.yMin = mmData.yMax = lines[0].data[0][1];
		for(var k = 0 ; k < lines.length; k++){
			var data = lines[k].data;
			for(var i in data){
				i=parseInt(i);
				mmData.xMin = mmData.xMax = i;
				mmData.yMin = mmData.yMax = data[i];
//				data.firstIndex=i;
				break;
			}
			for(var i in data){
				i=parseInt(i);
				if(i < mmData.xMin){
					mmData.xMin = i;
				}else if(i > mmData.xMax){
					mmData.xMax = i;
				}
				
				var p = data[i];
				if(p < mmData.yMin){
					mmData.yMin = p;
				}else if(p > mmData.yMax){
					mmData.yMax = p;
				}
			}
/*			
			for(var i = 1; i < lineData.length; i++){
				var p = lineData[i];
				if(p[0] < mmData.xMin){
					mmData.xMin = p[0];
				}else if(p[0] > mmData.xMax){
					mmData.xMax = p[0];
				}
				
				if(p[1] < mmData.yMin){
					mmData.yMin = p[1];
				}else if(p[1] > mmData.yMax){
					mmData.yMax = p[1];
				}
			}*/
		}
		mmData.xDiff = mmData.xMax - mmData.xMin;
		mmData.yDiff = mmData.yMax - mmData.yMin;
		this.mmData = mmData;
//		return mmData;
	},
	_extendLineOption:function(lines){
		for(var i = 0; i < lines.length; i++){
			var line = lines[i];
			line.lineOption = $.extend(true, {}, this.cfg[line.lineOption.lineType], line.lineOption);
		}
	},
	convertData:function(line){
		var xFirstPoint = this.mmData.xMin;
		var yFirstPoint = this.mmData.yMin;
		
		line.cData=[];
		for(var i in line.data){
			//x	
			line.cData[i]=[];
			line.cData[i][0] = this.dist.left + (i-xFirstPoint)*this.dist.xDist;

			//y
			line.cData[i][1] = this.cfg.h - this.dist.bottom - (line.data[i]-yFirstPoint)*this.dist.yDist;
		}
	},
	
	drawLine:function(line){
	
//		this.ctx.fillStyle = this.cfg.bgColor;
//		this.ctx.fillRect (0, 0, this.cfg.w, this.cfg.h - this.dist.bottom);
		
		//line
		this.ctx.beginPath();
		for(var i = 0; i < line.cData.length; i++){
			var p = line.cData[i];
			if(i == 0){
				this.ctx.moveTo(p[0],p[1]);
			}else{
				this.ctx.lineTo(p[0],p[1]);
			}
		}
		this.ctx.strokeStyle = line.lineOption.lineColor;
		this.ctx.stroke();

	},
	drawCircle:function(line){
		//circle
		for(var i = 0; i < line.cData.length; i++){
			var p = line.cData[i];
			this.ctx.beginPath();
			this.ctx.arc(p[0], p[1], line.lineOption.pointRadius, 0, 2*Math.PI, true);
			this.ctx.fillStyle = line.lineOption.lineColor;
			this.ctx.fill();
		}
	},
	drawFill:function(line){
		this.ctx.beginPath();
		var p = line.cData[0];
		this.ctx.moveTo(p[0],this.cfg.h - this.dist.bottom);
		for(var i = 0; i < line.cData.length; i++){
			p = line.cData[i];
//			if(i == 0){
//				this.ctx.moveTo(p[0],p[1]);
//			}else{
				this.ctx.lineTo(p[0],p[1]);
//			}
		}
		this.ctx.lineTo(p[0],this.cfg.h - this.dist.bottom);
		
		this.ctx.fillStyle = line.lineOption.fillColor;
		this.ctx.fill();
	},
	drawxTick:function(chartData){
		var xTick = chartData.xTick;
		if(!xTick)return;
		var line = chartData.lines[0];

		var $xTick = $('<div class="bmlc-xtick"></div>');
		for(var i = 0; i < line.data.length; i++){
			$('<span>'+xTick[i]/*||line.data[i][0]*/+'</span>').css({"left":line.cData[i][0]}).appendTo($xTick);
		}
		$xTick.css({bottom:this.dist.bottom});
		$xTick.appendTo(this.$wrap);
	},
	drawyTick:function(chartData){
		var $yTick = $('<div class="bmlc-ytick"></div>');
		var yNum = 5;
		var yDist = this.dist.h / (yNum - 1);
		var yNumDist = this.mmData.yDiff / (yNum - 1);
		for(var i = 0; i < yNum; i++){
			var val=(this.mmData.yMin + yNumDist*i).toFixed(2);
			if(QS_NumFmt){
				val=QS_NumFmt.Fmt2(val,false,'',2);
			}

			$('<div>'+val+'</div>').css({"bottom":yDist*i}).appendTo($yTick);
		}
		$yTick.css({left:this.cfg.w - /*this.$yTick.children().last().width()*/this.dist.right+5, bottom:this.dist.bottom});
		$yTick.appendTo(this.$wrap);
	},
	drawUnderline:function(){
		this.ctx.beginPath();
		this.ctx.moveTo(0, this.cfg.h - this.dist.bottom);
		this.ctx.lineTo(this.cfg.w, this.cfg.h - this.dist.bottom);
		this.ctx.strokeStyle = this.cfg.underlineColor;
		this.ctx.stroke();
	},
	drawPolyline:function(){
//		this.ctx.save();
		var x = this.dist.left;
		var y = this.cfg.h - this.dist.bottom;
		var xDelta = 5;
		var yDelta = 12;//xTickHeight
		var h = 7;
//		this.lineWidth=1;
		this.ctx.beginPath();
		this.ctx.moveTo(x - xDelta, y + yDelta);
		this.ctx.lineTo(x - xDelta, y + yDelta + h);
		this.ctx.lineTo(x + this.dist.xDist + xDelta, y + yDelta + h);
		this.ctx.lineTo(x + this.dist.xDist + xDelta, y + yDelta);
		this.ctx.strokeStyle = this.cfg.underlineColor;
		this.ctx.stroke();
		
		var lang=this.lang;
		var $dateText = $('<div class="bmlc-datetext"></div>');
//		this.$dateText.html('');
		$('<span>'+lang['month']+'</span>').css({"left":x - xDelta,"top":y + yDelta + h}).appendTo($dateText);
		
		x = this.dist.left + this.dist.xDist*2;
//		this.lineWidth=1;
		this.ctx.beginPath();
		this.ctx.moveTo(x - xDelta, y + yDelta);
		this.ctx.lineTo(x - xDelta, y + yDelta + h);
		this.ctx.lineTo(x + this.dist.xDist*3 + xDelta*3, y + yDelta + h);
		this.ctx.lineTo(x + this.dist.xDist*3 + xDelta*3, y + yDelta);
		this.ctx.strokeStyle = this.cfg.underlineColor;
		this.ctx.stroke();
		this.ctx.closePath();
		
		this.ctx.beginPath();
		this.ctx.fillRect (0, 0, 0, 0);//fix excanvas bug
		this.ctx.closePath();
//		this.ctx.restore();
		$('<span>'+lang['year']+'</span>').css({"left":x - xDelta,"top":y + yDelta + h}).appendTo($dateText);
		$dateText.appendTo(this.$wrap);
	},
	drawOneMonth:function(){
		var x = this.dist.left;
		var y = this.cfg.h - this.dist.bottom;
//		var xDelta = 5;
		var yDelta = 12;//xTickHeight
//		var h = 7;

		var lang=this.lang;
		var $dateText = $('<div class="bmlc-datetext"></div>');
		$('<span>'+lang['onemonth']+'</span>').css({"left":x,"top":y + yDelta}).appendTo($dateText);
		$dateText.appendTo(this.$wrap);
	},
	changeOutSize:function(w,h){
		this.cfg.w = w;
		this.cfg.h = h;
		if(!this.chartData)return;
		this._resize();
//		this.$canvas.attr("width",this.cfg.w);
//		this.$canvas.attr("height",this.cfg.h);
//		this.init(this.chartData);
	}
	
}